<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="UTF-8" />
		<title>JavaScript内置对象</title>
	</head>
	<style type="text/css">
		* {
			padding: 0px;
			margin: 0px;
		}
    .calendar{
      width: 370px;
      height: 280px;
      display: block;
      margin: auto;
      background:rgba(85, 85, 85, 0.7);
    }

    /**
     * 设置日历顶部盒子
     */
    .calendar .calendar-title-box{
      position: relative;
      width: 100%;
      height: 36px;
      line-height: 36px;
      text-align:center;
      border-bottom: 1px solid #ddd;
    }

    /**
     * 设置上个月的按钮图标
     */
    .calendar .prev-month {
      position: absolute;
      top: 12px;
      left: 0px;
      display: inline-block;
      width: 0px;
      height: 0px;
      border-left: 0px;
      border-top: 6px solid transparent;
      border-right: 8px solid black;
      border-bottom: 6px solid transparent;
      cursor: pointer;
    }

    /**
     * 设置下个月的按钮图标
     */
    .calendar .next-month {
      position: absolute;
      top: 12px;
      right: 0px;
      display: inline-block;
      width: 0px;
      height: 0px;
      border-right: 0px;
      border-top: 6px solid transparent;
      border-left: 8px solid black;
      border-bottom: 6px solid transparent;
      cursor: pointer;
    }


    /* 设置日历表格样式 */
    .calendar-table{
      width: 100%;
      border-collapse: collapse;
      text-align:center;
    }

    /* 表格行高 */
    .calendar-table tr{
      height: 30px;
      line-height: 30px;
    }

    /* 当前天 颜色特殊显示 */
    .currentDay {
      color: red;
    }

    /* 本月 文字颜色 */
    .currentMonth {
      color: #fff;
    }

    /* 其他月颜色 */
    .otherMonth{
      color: black;
    }
    #top{
      background:rgba(85, 85, 85, 0.7);
      width: 370px;
      height: 140px;
      margin: auto;
      margin-top: 10px;
    }
      #now{
        font-size: 30px;
        width: 500px;
        height: 40px;
        margin-top: 20px;
        margin-left: 10px;
      }
      #now1{
        font-size: 50px;
        margin-left: 10px;
        width: 500px;
        height: 40px;
        color: #fff;
      }
      #now2{
        float: left;
        font-size: 20px;
        margin-left: 10px;
        width: 300px;
        height: 30px;
        line-height: 30px;
      }
		#big {
			background-image: url(http://a3.qpic.cn/psb?/V11OOyBa27S1Km/uA.YwFZafqwXdueQIfhEBtCXFAN.Q8zlSyWkIsyX7hM!/b/dB8BAAAAAAAA&bo=rQOAAgAAAAAFBwg!&rf=viewer_4);
			background-repeat: repeat-x;
			background-size: 80%;
			background-attachment: fixed;
			position: fixed;
			width: 100%;
			height: 100%;
			z-index: -1;
			opacity: 0.5;
		}

		pre {
			font-size: 16px;
			font-weight: bolder;
			font-family: "微软雅黑";
		}

		#box {
			width: 1400px;
			height: 100%;
			margin: auto;
			padding-top: 50px;
		}

		#dh {
			width: 200px;
			height: 80%;
			background: rgba(225, 226, 230, 0.6);
			position: fixed;
			float: left;
			margin-top: 40px;
			font-size: 25px;
		}

		a {
			text-decoration: none;
		}
	</style>
  <script type="text/javascript">
  window.onload=function aa() {
  var today=new Date();               //获取当前年月日
  var year=today.getFullYear();      //获取当前年份
  var month=today.getMonth()+1;     //获取当前月
  var today1=new Date(year,month,0);   //获取当前月份最后一天
  var monthday=today1.getDate();     //获取当前月份天数
  var today2=new Date(year,month,-monthday+1);  //获取当前月份第一天
  var day=today2.getDay();          //获取当前月份第一天的星期几

  var date=today.getDate();
  // document.write(date);
  var hour=today.getHours();
  var hour1=parseInt(hour/10);
  var hour2=hour%10;
  var minute=today.getMinutes();
  var minute1=parseInt(minute/10);
  var minute2=minute%10;
  var second=today.getSeconds();
  var second1=parseInt(second/10);
  var second2=second%10;
  var now=year+"年"+month+"月"+date+"日";
  var now2=year+"年"+month+"月"
  var now1=hour1+""+hour2+":"+minute1+minute2+":"+second1+second2;
  document.getElementById("now").innerHTML=now;
  document.getElementById("now1").innerHTML=now1;
  document.getElementById("now2").innerHTML=now2;
  setTimeout(aa,1000);
}
  </script>
	<body>
		<div id="big">
		</div>
		<div id="dh">
			<a href="index.html">目录</a><br />
			<a href="zxw.html" style="font-size: 18px;">一、工具使用</a><br />
			<a href="gf.html" style="font-size: 18px;">二、WEB前端开发规范</a>
			<a href="3.html" style="font-size: 18px;">三、JavaScript内置对象</a>
			<a href="4.html" style="font-size: 18px;">四、JS内置对象(二)</a>
      <a href="5.html" style="font-size: 18px;">五、冒泡流和捕获流</a>
      <a href="6.html" style="font-size: 18px;">六、总结,万年历实例</a>
		</div>
		<div id="box">
			<h1>总结,万年历实例</h1><br />
			<h3>一、闭包</h3><br />
      <h3>二、-RHS LHS</h3><br />
      <h3>三、-Js编译运行机制    引擎   语法解释器</h3><br />
      <h3>四、-Js 直译的脚本语言  运行在依靠其他环境。</h3><br />
      <h3>五、-Js垃圾清除机制  ；市面浏览器 标记清除   IE浏览器 引用计数  （比如延时器）</h3><br />
      <h3>六、-函数声明式声明无法清除，等待垃圾回收机制清除。</h3><br />
      <h3>七、-var func = function () { } 可以手动清除</h3><br />
      <h3>八、-作用域  局部 全局   函数块级作用域</h3><br />
      <h3>九、-内存 堆栈 池</h3><br />
      <h3>十、-this 是 执行时的环境，而不是声明时的环境</h3><br />
      <img src="http://a3.qpic.cn/psb?/V11OOyBa27S1Km/CMid8OGBtqzj1agHsA5xf2Cp4riODZVtFthHJHxmm*Q!/b/dHkBAAAAAAAA&bo=2gEcAQAAAAADB.Q!&rf=viewer_4" alt="" />
      <img src="http://a1.qpic.cn/psb?/V11OOyBa27S1Km/eK4vZ68uT*xlpY4jztF7LSZTDLy0CyF4bBoQkQpg7Eo!/b/dOQAAAAAAAAA&bo=8gEvAQAAAAADAPg!&rf=viewer_4" alt="" />
      <h3>十一、-面向对象语言的要求。</h3><br />
      <img src="http://a1.qpic.cn/psb?/V11OOyBa27S1Km/4IX3ERPnz.ZHiMATsn7q8y7OmjDB1C27sJB1EJECX7U!/b/dHoBAAAAAAAA&bo=dALmAAAAAAADB7I!&rf=viewer_4" alt="" />
      <img src="http://a2.qpic.cn/psb?/V11OOyBa27S1Km/dQJsyL*H*weGv91kZozMmONmOTyoNmzLr4*4KIPO7wE!/b/dHgBAAAAAAAA&bo=YwHeAAAAAAADAJk!&rf=viewer_4" alt="" />
      <h3>十二、-链式调用  要了解</h3><br />
      <h3>十三、-所有要new的函数 都写成大写。</h3><br />
      <h3>十四、万年历实例</h3><br />
      <div id="top">
        <div id="now1"></div>
        <div id="now"></div>
        <div id="now2"></div>
      </div>
      <div class='calendar' id='calendar'></div>
      <script type="text/javascript">
      (function(){
    /*
     * 用于记录日期，显示的时候，根据dateObj中的日期的年月显示
     */
    var dateObj = (function(){
      var _date = new Date();    // 默认为当前系统时间
      return {
        getDate : function(){
          return _date;
        },
        setDate : function(date) {
          _date = date;
        }
      };
    })();

    // 设置calendar div中的html部分
    renderHtml();
    // 表格中显示日期
    showCalendarData();
    // 绑定事件
    bindEvent();

    /**
     * 渲染html结构
     */
    function renderHtml() {
      var calendar = document.getElementById("calendar");
      var titleBox = document.createElement("div");  // 标题盒子 设置上一月 下一月 标题
      var bodyBox = document.createElement("div");  // 表格区 显示数据

      // 设置标题盒子中的html
      titleBox.className = 'calendar-title-box';
      titleBox.innerHTML = "<span class='prev-month' id='prevMonth'></span>" +
        "<span class='calendar-title' id='calendarTitle'></span>" +
        "<span id='nextMonth' class='next-month'></span>";
      calendar.appendChild(titleBox);    // 添加到calendar div中

      // 设置表格区的html结构
      bodyBox.className = 'calendar-body-box';
      var _headHtml = "<tr>" +
                "<th>日</th>" +
                "<th>一</th>" +
                "<th>二</th>" +
                "<th>三</th>" +
                "<th>四</th>" +
                "<th>五</th>" +
                "<th>六</th>" +
              "</tr>";
      var _bodyHtml = "";

      // 一个月最多31天，所以一个月最多占6行表格
      for(var i = 0; i < 6; i++) {
        _bodyHtml += "<tr>" +
                "<td></td>" +
                "<td></td>" +
                "<td></td>" +
                "<td></td>" +
                "<td></td>" +
                "<td></td>" +
                "<td></td>" +
              "</tr>";
      }
      bodyBox.innerHTML = "<table id='calendarTable' class='calendar-table'>" +
                _headHtml + _bodyHtml +
                "</table>";
      // 添加到calendar div中
      calendar.appendChild(bodyBox);
    }

    /**
     * 表格中显示数据，并设置类名
     */
    function showCalendarData() {
      var _year = dateObj.getDate().getFullYear();
      var _month = dateObj.getDate().getMonth() + 1;
      var _dateStr = getDateStr(dateObj.getDate());

      // 设置顶部标题栏中的 年、月信息
      var calendarTitle = document.getElementById("calendarTitle");
      var titleStr = _dateStr.substr(0, 4) + "年" + _dateStr.substr(4,2) + "月";
      calendarTitle.innerText = titleStr;

      // 设置表格中的日期数据
      var _table = document.getElementById("calendarTable");
      var _tds = _table.getElementsByTagName("td");
      var _firstDay = new Date(_year, _month - 1, 1);  // 当前月第一天
      for(var i = 0; i < _tds.length; i++) {
        var _thisDay = new Date(_year, _month - 1, i + 1 - _firstDay.getDay());
        var _thisDayStr = getDateStr(_thisDay);
        _tds[i].innerText = _thisDay.getDate();
        //_tds[i].data = _thisDayStr;
        _tds[i].setAttribute('data', _thisDayStr);
        if(_thisDayStr == getDateStr(new Date())) {    // 当前天
          _tds[i].className = 'currentDay';
        }else if(_thisDayStr.substr(0, 6) == getDateStr(_firstDay).substr(0, 6)) {
          _tds[i].className = 'currentMonth';  // 当前月
        }else {    // 其他月
          _tds[i].className = 'otherMonth';
        }
      }
    }

    /**
     * 绑定上个月下个月事件
     */
    function bindEvent() {
      var prevMonth = document.getElementById("prevMonth");
      var nextMonth = document.getElementById("nextMonth");
      addEvent(prevMonth, 'click', toPrevMonth);
      addEvent(nextMonth, 'click', toNextMonth);
      var table = document.getElementById("calendarTable");
    var tds = table.getElementsByTagName('td');
    for(var i = 0; i < tds.length; i++) {
      addEvent(tds[i], 'click', function(e){
        console.log(e.target.getAttribute('data'));
      });
    }
    }

    /**
     * 绑定事件
     */
    function addEvent(dom, eType, func) {
      if(dom.addEventListener) {  // DOM 2.0
        dom.addEventListener(eType, function(e){
          func(e);
        });
      } else if(dom.attachEvent){  // IE5+
        dom.attachEvent('on' + eType, function(e){
          func(e);
        });
      } else {  // DOM 0
        dom['on' + eType] = function(e) {
          func(e);
        }
      }
    }

    /**
     * 点击上个月图标触发
     */
    function toPrevMonth() {
      var date = dateObj.getDate();
      dateObj.setDate(new Date(date.getFullYear(), date.getMonth() - 1, 1));
      showCalendarData();
    }

    /**
     * 点击下个月图标触发
     */
    function toNextMonth() {
      var date = dateObj.getDate();
      dateObj.setDate(new Date(date.getFullYear(), date.getMonth() + 1, 1));
      showCalendarData();
    }

    /**
     * 日期转化为字符串， 4位年+2位月+2位日
     */
    function getDateStr(date) {
      var _year = date.getFullYear();
      var _month = date.getMonth() + 1;    // 月从0开始计数
      var _d = date.getDate();

      _month = (_month > 9) ? ("" + _month) : ("0" + _month);
      _d = (_d > 9) ? ("" + _d) : ("0" + _d);
      return _year + _month + _d;
    }
    })();

      </script>
		</div>
	</body>

</html>
